<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>产品详细</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 重置样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!-- 公共样式 -->
		<link rel="stylesheet" type="text/css" href="css/common.css"/>
		<!-- 页面样式 -->
		<link rel="stylesheet" type="text/css" href="css/detail.css"/>
		<!-- 网页图标 -->
		<link rel="shortcut icon" href="./img/b.ico"/>
		 <!-- iconfont引用 -->
        <link rel="stylesheet" href="//at.alicdn.com/t/font_867113_nyty0dwvjw.css"/>
	</head>
	<body>
		
		<!-- 头部 s -->
		<header class="clearfix">
			<div class="btnFl fl">
				<a href="buy_index.html">Back</a>
			</div>
			<div class="star fr">
				<a href=""><img src="img/fl9.png"/></a>
			</div>
			<div class="titleFl">
				产品详细
			</div>
		</header>
		<!-- 头部 e -->
		
		<!-- 主体 s -->
		<section>
			<!-- 图片及产品数据详细 -->
			<div class="pro">
				<!-- 图片 -->
				<div class="pro_pic">
					<img src="img/images/发现_10.png"/>
				</div>
				<!-- 价格 -->
				<div class="pro_price clearfix">
					<span class="iconfont icon-renminbi fl">32</span>
					<a href="" class="fr">购买</a>
				</div>
				<!-- 评价 -->
				<div class="pro_pj clearfix">
					<div class="hp fl">
					<img src="img/fl9.png"/>
					好评度
					<span>99%</span>
					</div>
					<a href="" class="fr">共605个评价&gt;</a>
				</div>
			</div>
			<!-- 适用商户 -->
			<div class="apply">
				<div class="appTip clearfix">
					<span class="fl">适用商户</span>
					<span class="fr">&gt;</span>
				</div>
				<!-- 第一家商户 -->
				<div class="appShop clearfix">
					<!-- 左侧图片 -->
					<div class="shopPic fl">
						<img src="img/images/产品详细页_07.jpg"/>
					</div>
					<!-- 中间商店信息 -->
					<div class="shopDet fl">
						<div class="shop_name">
							<span>万岁寿司(正佳店)</span>
						</div>		
						<div class="shop_star clearfix">
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<span class="fl">10分</span>
						</div>
						<div class="shop_distance">
							离你100m
						</div>
						<div class="shop_link">
							<a href="">查看详情&gt;&gt;</a>
						</div>
					</div>
					<!-- 进入按钮 -->
					<div class="shopIn fr">
						<a href="">进入</a>
					</div>
				</div>
					<!-- 第二家商户 -->
				<div class="appShop clearfix">
					<!-- 左侧图片 -->
					<div class="shopPic fl">
						<img src="img/images/产品详细页_10.jpg"/>
					</div>
					<!-- 中间商店信息 -->
					<div class="shopDet fl">
						<div class="shop_name">
							<span>万岁寿司(体育西店)</span>
						</div>		
						<div class="shop_star clearfix">
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<span class="fl">10分</span>
						</div>
						<div class="shop_distance">
							离你100m
						</div>
						<div class="shop_link">
							<a href="">查看详情&gt;&gt;</a>
						</div>
					</div>
					<!-- 进入按钮 -->
					<div class="shopIn fr">
						<a href="">进入</a>
					</div>
				</div>
					<!-- 第三家商户 -->
				<div class="appShop clearfix">
					<!-- 左侧图片 -->
					<div class="shopPic fl">
						<img src="img/images/产品详细页_12.jpg"/>
					</div>
					<!-- 中间商店信息 -->
					<div class="shopDet fl">
						<div class="shop_name">
							<span>万岁寿司(昌岗店)</span>
						</div>		
						<div class="shop_star clearfix">
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<img src="img/fl9.png" class="fl" />
							<span class="fl">10分</span>
						</div>
						<div class="shop_distance">
							离你100m
						</div>
						<div class="shop_link">
							<a href="">查看详情&gt;&gt;</a>
						</div>
					</div>
					<!-- 进入按钮 -->
					<div class="shopIn fr">
						<a href="">进入</a>
					</div>
				</div>					
			</div>
		</section>
		<!-- 主体 e -->
		
		<!-- 底部 s -->
		<footer>
			<div class="choose_page clearfix">
				<div class="shouye fl">
					<a href="buy_index.html">
						<img src="img/zy.png"/>
					</a>
					<div>首页</div>
				</div>
				<div class="fenlei fl">
					<a href="buy_fenlei.html">
						<img src="img/fenl.png"/>
					</a>
					<div>分类</div>
				</div>
				<div class="faxian fl">
					<a href="buy_faxian.html">
						<img src="img/fax.png"/>
					</a>
					<div>发现</div>
				</div>
				<div class="my fl">
					<a href="buy_my.html">
						<img src="img/wod.png"/>
					</a>
					<div>我的</div>
				</div>
			</div>
		</footer>
		<!-- 底部 e -->
		
		<!--js代码 启动swiper对象-->   
		<script  type="text/javascript" charset="utf-8">
					    document.body.style.height = window.innerHeight + "px";
		    
		    /*动态改变根元素字体大小*/
		    function recalc() {
		    	// 获取客户端的宽度
		        var clientWidth = document.documentElement.clientWidth;
		        if(!clientWidth) return;
		        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
		        document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
		    }
		
		    function initRecalc() {
		        recalc();
		        // if(浏览器支持横竖屏切换的事件){横竖屏事件}else{ resize事件 }
		        var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
		        if(!document.addEventListener) return;
		        window.addEventListener(resizeEvt, recalc, false);
		        document.addEventListener('DOMContentLoaded', recalc, false);
		    }
		    initRecalc();   
		    
			var mySwiper = new Swiper(".pic_swiper", {
				direction: "horizontal", // 轮播方式的方向：横向/垂直
				loop: true, // 是否需要循环
				autoplay:true,              // 自动轮播
				pagination: { //分页
					el: '.swiper-pagination',
				},
			})
		</script>
	</body>
</html>
